<template>
  <div class="footer">
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item >
        <router-link to="/home"  active-class="isRed" >
          <div class="myicon myicon-user"></div>
          <p>首页</p>
        </router-link>
      </mt-tab-item>
      <mt-tab-item>
        <router-link to="/category"  active-class="isRed" >
          <div class="myicon myicon-user"></div>
          <p>分类</p>
        </router-link>
      </mt-tab-item>
      <mt-tab-item>
        <router-link to="/cart"   active-class="isRed">
          <div class="myicon myicon-user"></div>
          <p>购物车</p>
        </router-link>
      </mt-tab-item>
      <mt-tab-item >
        <router-link to="/user" active-class="isRed">
          <div class="myicon myicon-user"></div>
          <p>用户中心</p>
        </router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  data () {
    return {
      selected: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.footer  {
     a {
       color: #0094ff;
     }
     .isRed {
     color : red;
   }
   }

</style>
